/*
 * @Autor: dc
 * @Date: 2022-03-29 16:51:54
 * @LastEditors: dc
 * @LastEditTime: 2022-03-30 15:49:41
 * @Description: 容器组件
 */

// 引入Count的Ui组件
import CountUI from '../../components/Count'

// 引入connect用于链接UI组件与redux
import { connect } from 'react-redux'
// 引入action
import { 
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction 
} from '../../redux/count_action'


/* 
    1.mapStateToProps函数返回的是一个对象;
    2.返回的对象中的key就作为传递给UI组件props的key,value就是作为传递给UI组件props的value --- 状态
    3.mapStateToProps用于传递状态
*/
// 映射状态
const mapStateToProps = (state)=>{
    return { count: state }
}

/* 
    1.mapDispatchToProps函数返回的是一个对象;
    2.返回的对象中的key就作为传递给UI组件props的key,value就是作为传递给UI组件props的value --- 方法
    3.mapDispatchToProps用于传递操作状态的方法
*/
// 映射操作状态的方法
const mapDispatchToProps =(dispatch)=>{
    return {
        jia: data => dispatch(createIncrementAction(data)),
        jian:data => dispatch(createDecrementAction(data)),
        jiaAsync: (data,time) => dispatch(createIncrementAsyncAction(data,time))
    }
}

// 暴露 创建的Count的容器组件
// connect()()创建容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
